﻿@page "/heatmap-chart/large-data"

@using Syncfusion.Blazor.HeatMap
@using sf_blazor_heatmapdata
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the annual traffic report of an airport with the number of flight arrivals in a year. The data label is disabled in this sample, the Tooltip displays the data point values.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to switch the Heatmap to Canvas Rendering Mode. The rendering performance will be better in <code>Canvas</code> Rendering Mode, while loading large datasets. </p>                    
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <SfHeatMap DataSource="@DataSource">
                <HeatMapTitleSettings Text="Annual Flight Traffic Report">
                    <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
                </HeatMapTitleSettings>
                <HeatMapXAxis Minimum="@XMinimum"
                              Maximum="@XMaximum"
                              IntervalType="@SFHeatMap.IntervalType.Days"
                              ValueType="@SFHeatMap.ValueType.DateTime"
                              LabelFormat="MMM"
                              ShowLabelOn="@SFHeatMap.LabelType.Months">
                </HeatMapXAxis>
                <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
                <HeatMapPaletteSettings Type="@SFHeatMap.PaletteType.Gradient">
                    <HeatMapPalettes>
                        <HeatMapPalette Value="150" Color="#A6DC7E"></HeatMapPalette>
                        <HeatMapPalette Value="250" Color="#DCD57E"></HeatMapPalette>
                        <HeatMapPalette Value="300" Color="#DC8D7E"></HeatMapPalette>
                    </HeatMapPalettes>
                </HeatMapPaletteSettings>
                <HeatMapCellSettings ShowLabel="false">
                    <HeatMapCellBorder Width="0"></HeatMapCellBorder>
                </HeatMapCellSettings>
                <HeatMapLegendSettings Visible="false"></HeatMapLegendSettings>
            </SfHeatMap>
        </div>
    </div>
</div>

@code{
    string[] YLabels = new string[] { "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00" };
    DateTime XMinimum = new DateTime(2017, 1, 1);
    DateTime XMaximum = new DateTime(2017, 12, 31);
    BorderModel Border = new BorderModel() { Width = 0 };
    int[,] DataSource = HeatMapData.GetLargeData();
}
